<template>
    <el-header id="panel-header">
        <div class="module left-module">
            <span class="icon-badge" v-show="params.is_robot == 0" :class="{ 'red-color': params.talk_type == 1 }">
                {{ params.talk_type == 1 ? '好友' : '群组' }}
            </span>
            <span class="nickname">{{ params.nickname }}</span>
            <span v-show="params.talk_type == 2" class="num">({{ groupNum }})</span>
            <el-row class="add-custom" v-if="!data.customer && (isCustom != 1 || isFriend != 1)">
                <span style="color: #606266; font-size: 12px;">添加为</span>
                <el-button size="small" type="primary" style="margin-left: 5px;" @click="handleAddCustom" v-if="isCustom != 1">客户</el-button>
                <el-button size="small" type="primary" plain @click="handleAddFriend" v-if="isFriend != 1">好友</el-button>
            </el-row>
        </div>
        <div v-show="params.talk_type == 1 && params.is_robot == 0" class="module center-module">
            <p class="online">
                <span v-show="isOnline" class="online-status"></span>
                <span>{{ isOnline ? '在线' : '离线' }}</span>
            </p>
            <p class="keyboard-status" v-show="isKeyboard">对方正在输入 ...</p>
        </div>
        <div class="module right-module" >
            <el-tooltip content="历史消息" placement="bottom">
                <p v-show="params.is_robot == 0">
                    <el-icon @click="triggerEvent('history')"><ele-Clock /></el-icon>
                </p>
            </el-tooltip>
            <!-- <el-tooltip content="群公告" placement="bottom">
                <p v-show="params.talk_type == 2">
                    <el-icon @click="triggerEvent('notice')"><ele-Bell /></el-icon>
                </p>
            </el-tooltip> -->
            <!-- <el-tooltip content="群设置" placement="bottom">
                <p v-show="params.talk_type == 2">
                    <el-icon @click="triggerEvent('setting')"><ele-Setting /></el-icon>
                </p>
            </el-tooltip> -->
        </div>
    </el-header>
</template>
<script>
import { toRefs, reactive, onMounted, watch } from 'vue'
export default {
    props: {
        data: {
            type: Object,
            default: () => {
                return {
                    talk_type: 0,
                    receiver_id: 0,
                    params: 0,
                    nickname: '',
                }
            },
        },
        online: {
            type: Boolean,
            default: false,
        },
        keyboard: {
            type: [Number, Boolean],
            default: false,
        },
    },
    setup(props, context) {
        const { data, online, keyboard } = toRefs(props)
        const state = reactive({
            params: {
                talk_type: 0,
                receiver_id: 0,
                params: 0,
                nickname: '',
            },
            isOnline: false,
            isKeyboard: false,
            groupNum: 0,
            isCustom: 0, // 是否客户
            isFriend: 0, // 是否好友
        })
        const setOnlineStatus = (value) => {
            state.isOnline = value
        }
        const setParamsData = (object) => {
            Object.assign(state.params, object)
        }
        const setGroupNum = (value) => {
            state.groupNum = value
        }
        const triggerEvent = (event_name) => {
            context.emit('event', event_name)
        }
        // TO DO 添加为客户
        const handleAddCustom = () => {

        }
        // TO DO 添加为好友
        const handleAddFriend = () => {

        }
        onMounted(() => { 
            setParamsData(data.value)
            setOnlineStatus(online.value)
        })
        watch(() => data.value,
            val => {
                setParamsData(val)
            }
        )
        watch(() => online.value,
            val => {
                setOnlineStatus(val)
            }
        )
        watch(() => keyboard.value,
            val => {
                state.isKeyboard = val
                setTimeout(() => {
                    state.isKeyboard = false
                }, 2000)
            }
        )
        return {
            ...toRefs(state),
            triggerEvent,
            setGroupNum,
            setParamsData,
            setOnlineStatus,
            handleAddCustom,
            handleAddFriend
        }
    }
}
</script>
<style lang="scss" scoped>
#panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f5eeee;
    .module {
        width: 100%/3;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .left-module {
        padding-right: 5px;
        .icon-badge {
            background: rgb(81 139 254);
            height: 18px;
            line-height: 18px;
            padding: 1px 3px;
            font-size: 10px;
            color: white;
            border-radius: 3px;
            margin-right: 8px;
            flex-shrink: 0;
            &.red-color {
                background: #f97348;
            }
        }
        .nickname {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .center-module {
        flex-direction: column;
        justify-content: center;
        .online {
            color: #cccccc;
            font-weight: 300;
            font-size: 15px;
            &.color {
                color: var(--el-color-primary);
            }
            .online-status {
                position: relative;
                top: -1px;
                display: inline-block;
                width: 6px;
                height: 6px;
                vertical-align: middle;
                border-radius: 50%;
                position: relative;
                background-color: var(--el-color-primary);
                margin-right: 5px;
                &:after {
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    width: 100%;
                    height: 100%;
                    border: 1px solid #1890ff;
                    border-radius: 50%;
                    -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
                    animation: antStatusProcessing 1.2s ease-in-out infinite;
                    content: '';
                }
            }
        }
        .keyboard-status {
            height: 20px;
            line-height: 18px;
            font-size: 10px;
            animation: inputfade 600ms infinite;
            -webkit-animation: inputfade 600ms infinite;
        }
    }
    .right-module {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        p {
            cursor: pointer;
            font-size: 20px;
            color: #828f95;
            &:active i {
                font-size: 26px;
                transform: scale(1.3);
                transition: ease 0.5s;
                color: red;
            }
        }
    }
}
/* css 动画 */
@keyframes inputfade {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes inputfade {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.5;
    }
    to {
        -webkit-transform: scale(2.4);
        transform: scale(2.4);
        opacity: 0;
    }
}
@keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.5;
    }
    to {
        -webkit-transform: scale(2.4);
        transform: scale(2.4);
        opacity: 0;
    }
}
.add-custom{
    margin-left: 10px; 
    align-items: center;
    border:1px solid #f0f0f0; 
    padding: 5px 10px;
    border-radius: 4px;
}
</style>
  